<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购商城</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <!-- 设置一个大盒子居中对齐 -->
    <div class="shopping">
        <!-- 1、设置头部导航栏 -->
        <div class="header_nav">
            <div class="w">
                <!-- 设置左边登录导航栏 -->
                <div class="nav_left">
                    <span>品优购欢迎您！</span>
                    <a href="html/log.html">请登录</a>
                    <a href="html/regester.html" class="col-red">免费注册</a>
                </div>
                <!-- 设置右边导航栏 -->
                <div class="nav_right">                               
                    <ul>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">我的品优购</a></li>
                        <li><a href="#">品优购会员</a></li>
                        <li><a href="#">企业采购</a></li>
                        <li><a href="#">关注品优购</a></li>
                        <li><a href="#">客户服务</a></li>
                        <li><a href="#">网站导航</a></li>
                    </ul>
                </div>
            </div>
        </div>
         <!-- 头部导航栏结束 -->
         <!-- 2、设置头部搜索框 -->
        <div class="header_search w">
             <!-- 设置左侧logo区域 -->
             <div class="header_search_logo">
                 <h1>
                     <a href="#" title="品优购商城">品优购商城</a>
                 </h1>
             </div>
             <!-- 设置中间搜索框 -->
             <div class="header_search_input">
                <input type="text" value="语言开发">
                <button>搜索</button>
             </div>
             <!-- 设置中下热词区域 -->
             <div class="header_hotwords">                                         
                 <ul>
                     <li><a href="#" class="col-red">优惠购首发</a></li>
                     <li><a href="#">亿元优惠</a></li>
                     <li><a href="#">9.9元团购</a></li>
                     <li><a href="#">美满99减30</a></li>
                     <li><a href="#">办公用品</a></li>
                     <li><a href="#">电脑</a></li>
                     <li><a href="#">通信</a></li>
                 </ul>
             </div>
             <!-- 设置购物车区域 -->
             <div class="header_shopcar">
                 <button>我的购物车</button>
                 <div class="num">8</div>
             </div>
        </div>
         <!-- 头部搜索框结束 -->
         <!-- 3、设置内容区导航栏开始 -->
        <div class="hr">
            <div class="content_nav w">
                <!-- 设置左侧全部商品分类区域 -->
                <div class="content_nav_goods">
                    <div class="dd"><a href="#">全部商品分类</a></div>
                    <div class="dt">
                         <ul>
                            <li><a href="#">家用电器</a></li>
                            <li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">通信</a></li>
                            <li><a href="#">电脑</a>、<a href="#">办公</a></li>
                            <li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a></li>
                            <li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a></li>
                            <li><a href="#">个户化妆</a>、<a href="#">清洁用品</a>、<a href="#">宠物</a></li>
                            <li><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">珠宝</a>、<a href="#">奢侈品</a></li>
                            <li><a href="#">运动户外</a>、<a href="#">钟表</a></li>
                            <li><a href="#">汽车</a>、<a href="#">汽车用品</a></li>
                            <li><a href="#">母婴</a>、<a href="#">玩具乐器</a></li>
                            <li><a href="#">食品</a>、<a href="#">酒类</a>、<a href="#">生鲜</a>、<a href="#">特产</a></li>
                            <li><a href="#">医药保健</a></li>
                            <li><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">电子书</a></li>
                            <li><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a></li>
                            <li><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 设置内容区右侧导航栏 -->
                <div class="content_nav_area">                                   
                    <ul>
                        <li><a href="#">服装城 </a></li>
                        <li><a href="#">美妆馆</a></li>
                        <li><a href="#">传智超市</a></li>
                        <li><a href="#">全球购</a></li>
                        <li><a href="#">闪购</a></li>
                        <li><a href="#">团购</a></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">有趣</a></li>
                    </ul>
                </div>
            </div>
        </div>
         <!-- 内容区导航栏结束 -->
         <!-- 4、设置内容区样式设置 -->
        <div class="content w clearfix">
             <!-- 设置中间图片样式 -->
            <div class="content_img">
                <a href="upload/bigbg.png" download="大牌.png"><img src="upload/bigbg.png" alt="大牌PK" title="大牌PK"></a>
            </div>
            <!-- 设置快报样式 -->
            <div class="content_newspaper">               
                <!-- 设置快报中的顶部文字样式 -->
                <div class="content_newspaper_text">
                    <div class="content_newspaper_hd">
                        <h5>品优购快报</h5>
                        <p><a href="#">更多</a></p>
                    </div>
                    <div class="content_newspaper_bd">
                        <p><a href=""><strong>[特惠]</strong>备战开学季 全网半价购数码</a></p>
                        <p><a href=""><strong>[公告]</strong>品优稳占家电网购六成份额</a></p>
                        <p><a href=""><strong>[特惠]</strong>百元中秋全品类礼券限量领</a></p>
                        <p><a href=""><strong>[公告]</strong>上品优生鲜 享阳澄湖大闸蟹</a></p>
                        <p><a href=""><strong>[特惠]</strong>每日享折扣品优品质游</a></p>
                    </div>
                </div>
                <!-- 设置快报中的服务样式 -->
                <div class="content_newspaper_service">
                    <div class="service">
                        <h5>话费</h5>
                        <p>话费</p>
                    </div>
                    <div class="service">
                        <h5>机票</h5>
                        <p>机票</p>
                    </div>
                        <div class="service">
                        <h5>电影票</h5>
                        <p>电影票</p>
                    </div>
                    <div class="service">
                        <h5>游戏</h5>
                        <p>游戏</p>
                    </div>
                    <div class="service">
                        <h5>彩票</h5>
                        <p>彩票</p>
                    </div>
                        <div class="service">
                        <h5>加油卡</h5>
                        <p>加油卡</p>
                    </div>
                    <div class="service">
                        <h5>酒店</h5>
                        <p>酒店</p>
                    </div>
                        <div class="service">
                        <h5>火车票</h5>
                        <p>火车票</p>
                    </div>
                    <div class="service">
                        <h5>众筹</h5>
                        <p>众筹</p>
                    </div>
                    <div class="service">
                        <h5>理财</h5>
                        <p>理财</p>
                    </div>
                    <div class="service">
                        <h5>礼品卡</h5>
                        <p>礼品卡</p>
                    </div>
                    <div class="service">
                        <h5>白条</h5>
                        <p>白条</p>
                    </div>
                </div>
                <!-- 设置快报中的广告样式 -->
                <div class="content_newspaper_ads">
                    <img src="upload/ads.png" alt="男装新势力" title="男装新势力">
                </div>
            </div>
        </div>
         <!-- 内容区样式设置结束 -->
         <!-- 5、设置今日推荐样式 -->
        <div class="recommend w">
             <!-- 设置左侧图标样式 -->
             <div class="recommend_icon">
                 <img src="images/recommend.png" alt="今日推荐" title="今日推荐"/>
                 <p>今日推荐</p>
             </div>
             <!-- 设置右侧四个推荐 -->
             <div class="recommend_style">
                 <ul>
                    <li>
                        <!-- 设置左侧文字样式 -->
                        <div class="single_text">
                            <h3>优质好货</h3>
                            <h5>满300减50</h5>
                            <p>满500减200</p>
                        </div>
                        <!-- 设置右侧图片样式 -->
                        <div class="single_img">
                            <img src="upload/优质好货.png" alt="">
                        </div>            
                     </li>  
                     <li>
                        <!-- 设置左侧文字样式 -->
                        <div class="single_text">
                            <h3>品牌尾货</h3>
                            <h5>满300减100</h5>
                            <p>团购低至9.9</p>
                            <span>团购</span>
                        </div>
                        <!-- 设置右侧图片样式 -->
                        <div class="single_img">
                            <img src="upload/品牌尾货.png" alt="">
                        </div>            
                     </li>    
                     <li>
                        <!-- 设置左侧文字样式 -->
                        <div class="single_text">
                            <h3>时尚穿搭</h3>
                            <h5>满300减50</h5>
                            <p>满500减200</p>
                            <span>闪购</span>
                        </div>
                        <!-- 设置右侧图片样式 -->
                        <div class="single_img">
                            <img src="upload/时尚穿搭.png" alt="">
                        </div>            
                     </li>    
                     <li>
                        <!-- 设置左侧文字样式 -->
                        <div class="single_text">
                            <h3>0点上新</h3>
                            <h5>全场包邮</h5>
                            <p>低至1折</p>
                            <span>闪购</span>
                        </div>
                        <!-- 设置右侧图片样式 -->
                        <div class="single_img">
                            <img src="upload/0点上新.png" alt="">
                        </div>            
                     </li>                       
                 </ul>                 
             </div>
        </div>
         <!-- 今日推荐样式结束 -->
         <!-- 6、设置猜你喜欢模块样式 -->
        <div class="like w">
             <!-- 设置顶部文字样式 -->
             <div class="like_text">
                 <p>猜你喜欢</p>
                 <a href="#"><span>换一批</span></a>
             </div>
             <!-- 设置底部商品样式 -->
             <div class="like_goods">
                 <ul>
                     <li>
                         <div class="img">
                             <a href="#"><img src="upload/包.png" alt="优质美包" title="优质美包"></a>
                         </div>
                         <div class="like_goods_text">
                             <a href="#">
                                <p>阳光美包新款单肩包女</p>
                                <p>包时尚子母包四件套女</p>
                             </a>
                             <h5><span>&yen;</span>116.00</h5>
                         </div>                        
                     </li>
                     <li>
                        <div class="img">
                            <a href="#"><img src="upload/锅.png" alt="优质美包" title="优质美包"></a>
                        </div>
                        <div class="like_goods_text">
                            <a href="#">
                                <p>爱仕达 30CM炒锅不粘</p>
                                <p>锅NWG8330E电磁炉炒</p>
                            </a>
                            <h5><span>&yen;</span>99.00</h5>
                        </div>  
                     </li>
                     <li>
                        <div class="img">
                            <a href="#"><img src="upload/捷波朗.png" alt="优质美包" title="优质美包"></a>
                        </div>
                        <div class="like_goods_text">
                            <a href="#">
                                <p>捷波朗</p>
                                <p>（jabra）BOOSI劲步</p>
                            </a>
                            <h5><span>&yen;</span>245.00</h5>
                        </div> 
                     </li>
                     <li>
                        <div class="img">
                            <a href="#"><img src="upload/欧普.png" alt="欧普" title="欧普"></a>
                        </div>
                        <div class="like_goods_text">
                           <a href="#">
                            <p>欧普</p>
                            <p>JYLZ08面板灯平板灯铝</p>
                           </a> 
                            <h5><span>&yen;</span>238.00</h5>
                        </div> 
                     </li>
                     <li>
                        <div class="img">
                            <a href="#"><img src="upload/三星.png" alt="三星" title="三星"></a>
                        </div>
                        <div class="like_goods_text">
                            <a href="#">
                                <p>三星</p>
                                <p>（G5500）移动联</p>
                            </a>
                            <h5><span>&yen;</span>649.00</h5>
                            
                        </div>
                     </li>
                     <li>
                        <div class="img">
                            <a href="#"><img src="upload/精华露.png" alt="精华露" title="精华露"></a>
                        </div>
                        <div class="like_goods_text">
                            <a href="#">
                                <p>韩国所望</p>
                                <p>紧致湿润精华露400ml</p>
                            </a>
                            <h5><span>&yen;</span>549.00</h5>
                        </div>
                     </li>
                 </ul>
             </div>
        </div>
         <!-- 猜你喜欢模块结束 -->
         <!-- 设置有趣区样式 -->
        <div class="funny w">
             <!-- 设置顶部文字区域 -->
             <div class="funny_hd">
                 <h5>传智播客 - 有趣区</h5>
             </div>
             <!-- 设置主体内容区域 -->
             <div class="funny_content">
                 <div class="funny_content_one">
                     <p>传智播客好书榜</p>
                    <p>畅销推荐低至一折</p>
                    <a href="#"><img src="upload/好书榜.png" alt=""></a>
                 </div>
                 <div class="funny_content_two">
                     <h5>好东西</h5>
                     <div class="funny_content_two_top">
                         <div class="funny_text">
                            <h3>达人推荐</h3>
                            <h5>雷神金属机械键盘</h5>
                            <h5 class="col-red">与你相见恨晚</h5>
                         </div>
                         <div class="funny_img">
                             <a href="#"><img src="upload/达人推荐.png" alt=""></a>
                         </div>
                     </div>
                     <div class="funny_content_two_bottom">
                        <div class="funny_text">
                            <h3>发现好物</h3>
                            <h5>一不小心霸气外露</h5>
                            <h5 class="col-red">等你来</h5>
                         </div>
                         <div class="funny_img">
                             <a href="#"><img src="upload/发现好物.png" alt=""></a>
                         </div>
                     </div>
                 </div>
                 <div class="funny_content_three">
                    <h5>品牌街</h5>
                    <div class="funny_content_three_top">
                        <div class="funny_text">
                            <h3>苏泊尔</h3>
                            <h5>返场大秀场</h5>
                            <h5 class="col-red">爆品直降100元</h5>
                        </div>
                        <div class="funny_img">
                            <a href="#"><img src="upload/苏泊尔.png" alt=""></a>
                        </div>
                    </div>
                    <div class="funny_content_three_bottom">
                       <div class="bottom_left">
                            <div class="funny_text">
                                <h3>国际大牌</h3>
                                <h5>adidas</h5>
                                <h5 class="col-red">部分3免1</h5>
                            </div>
                            <div class="funny_img">
                                    <a href="#"><img src="upload/国际大牌.png" alt=""></a>
                            </div>
                        </div>
                        <div class="bottom_right">
                            <div class="funny_text">
                                <h3>本周特卖</h3>
                                <h5>大牌折扣</h5>
                                <h5 class="col-red">每周上新</h5>
                            </div>
                            <div class="funny_img">
                                    <a href="#"><img src="upload/本周特卖.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="funny_content_four">
                    <a href="#"><img src="upload/logo标识.png" alt=""></a>
                </div>
            </div>     
        </div>
         <!-- 设置大楼层样式 -->
        <div class="floor w">
         <!-- 设置一楼家用电器模块样式 -->
            <div class="furniture" id="furniture">
                <!-- 设置头部内容区域 -->
                <div class="tablist">
                    <h3 class="col-red">家用电器</h3>
                    <!-- 设置右侧导航栏  -->
                    <ul>
                        <li><a href="#" class="col-red">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 设置主体区域 -->
                <div class="fur_content">
                    <div class="recom">
                        <!-- 设置左侧三星区域 -->
                        <div class="Samsung">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">4K电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <h3>三星曲面电视</h3>
                            <p>抽奖送豪礼</p>
                            <div class="san">
                                <a href="#"><img src="upload/曲面电视.png" alt=""></a>
                            </div>
                        </div>
                        <!-- 设置中间泡茶壶区域 -->
                        <div class="tea">
                            <p>烧水壶智能光控泡茶壶茶具套装</p>
                            <p>满299.00减40.00</p> 
                            <div class="img">
                                <img src="upload/泡茶壶.png" alt="">
                            </div>
                        </div>
                        <!-- 设置右侧优惠区域 -->
                        <div class="discount_area">
                            <div class="discount_left">
                                <div class="discount">
                                    <p>没满200减20元</p>
                                    <p>烘培节1元抢购</p>
                                    <div class="microwave">
                                        <img src="upload/微波炉.png" alt="">
                                    </div>
                                </div>
                                <div class="discount">
                                    <p>买乐视电视享钜惠</p>
                                    <p>送60个月会员</p>
                                    <div class="microwave">
                                        <img src="upload/乐视电视.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="discount_second">
                                <p>8.20彩电宅购节</p>
                                <p>65寸4K智能电视3799</p>
                                <div class="tv">
                                    <img src="upload/智能电视.png" alt="">
                                </div>
                            </div>
                            <div class="discount_last">
                                <div class="discount">
                                    <p>消暑神器全场领券</p>
                                    <p>1元赢空调</p>
                                    <div class="microwave">
                                        <img src="upload/空调.png" alt="">
                                    </div>
                                </div>
                                <div class="discount">
                                    <p>买乐视电视享钜惠</p>
                                    <p>送60个月会员</p>
                                    <div class="microwave">
                                        <img src="upload/风扇.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="logoarea">
                        <img src="upload/logo区域.png" alt="">
                    </div>
                </div>
            </div>
             <!-- 设置二楼手机通信 -->
            <div class="furniture" id="phone">
                <!-- 设置头部内容区域 -->
                <div class="tablist">
                    <h3 class="col-red">手机通讯</h3>
                    <!-- 设置右侧导航栏  -->
                    <ul>
                        <li><a href="#" class="col-red">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 设置主体区域 -->
                <div class="fur_content">
                    <div class="recom">
                        <!-- 设置左侧三星区域 -->
                        <div class="Samsung">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">4K电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <h3>三星曲面电视</h3>
                            <p>抽奖送豪礼</p>
                            <div class="san">
                                <a href="#"><img src="upload/曲面电视.png" alt=""></a>
                            </div>
                        </div>
                        <!-- 设置中间泡茶壶区域 -->
                        <div class="tea">
                            <p>烧水壶智能光控泡茶壶茶具套装</p>
                            <p>满299.00减40.00</p> 
                            <div class="img">
                                <img src="upload/泡茶壶.png" alt="">
                            </div>
                        </div>
                        <!-- 设置右侧优惠区域 -->
                        <div class="discount_area">
                            <div class="discount_left">
                                <div class="discount">
                                    <p>没满200减20元</p>
                                    <p>烘培节1元抢购</p>
                                    <div class="microwave">
                                        <img src="upload/微波炉.png" alt="">
                                    </div>
                                </div>
                                <div class="discount">
                                    <p>买乐视电视享钜惠</p>
                                    <p>送60个月会员</p>
                                    <div class="microwave">
                                        <img src="upload/乐视电视.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="discount_second">
                                <p>8.20彩电宅购节</p>
                                <p>65寸4K智能电视3799</p>
                                <div class="tv">
                                    <img src="upload/智能电视.png" alt="">
                                </div>
                            </div>
                            <div class="discount_last">
                                <div class="discount">
                                    <p>消暑神器全场领券</p>
                                    <p>1元赢空调</p>
                                    <div class="microwave">
                                        <img src="upload/空调.png" alt="">
                                    </div>
                                </div>
                                <div class="discount">
                                    <p>买乐视电视享钜惠</p>
                                    <p>送60个月会员</p>
                                    <div class="microwave">
                                        <img src="upload/风扇.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="logoarea">
                        <img src="upload/logo区域.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 设置三楼电脑办公 -->
            <div class="furniture" id="computer">
                <!-- 设置头部内容区域 -->
                <div class="tablist">
                    <h3 class="col-red">电脑办公</h3>
                    <!-- 设置右侧导航栏  -->
                    <ul>
                        <li><a href="#" class="col-red">热门</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">生活电器</a></li>
                        <li><a href="#">厨房电器</a></li>
                        <li><a href="#">个护健康</a></li>
                        <li><a href="#">应季电器</a></li>
                        <li><a href="#">空气/净水</a></li>
                        <li><a href="#">新奇特</a></li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
                <!-- 设置主体区域 -->
                <div class="fur_content">
                    <div class="recom">
                        <!-- 设置左侧三星区域 -->
                        <div class="Samsung">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">4K电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <h3>三星曲面电视</h3>
                            <p>抽奖送豪礼</p>
                            <div class="san">
                                <a href="#"><img src="upload/曲面电视.png" alt=""></a>
                            </div>
                        </div>
                        <!-- 设置中间泡茶壶区域 -->
                        <div class="tea">
                            <p>烧水壶智能光控泡茶壶茶具套装</p>
                            <p>满299.00减40.00</p> 
                            <div class="img">
                                <img src="upload/泡茶壶.png" alt="">
                            </div>
                        </div>
                        <!-- 设置右侧优惠区域 -->
                        <div class="discount_area">
                            <div class="discount_left">
                                <div class="discount">
                                    <p>没满200减20元</p>
                                    <p>烘培节1元抢购</p>
                                    <div class="microwave">
                                        <img src="upload/微波炉.png" alt="">
                                    </div>
                                </div>
                                <div class="discount">
                                    <p>买乐视电视享钜惠</p>
                                    <p>送60个月会员</p>
                                    <div class="microwave">
                                        <img src="upload/乐视电视.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="discount_second">
                                <p>8.20彩电宅购节</p>
                                <p>65寸4K智能电视3799</p>
                                <div class="tv">
                                    <img src="upload/智能电视.png" alt="">
                                </div>
                            </div>
                            <div class="discount_last">
                                <div class="discount">
                                    <p>消暑神器全场领券</p>
                                    <p>1元赢空调</p>
                                    <div class="microwave">
                                        <img src="upload/空调.png" alt="">
                                    </div>
                                </div>
                                <div class="discount">
                                    <p>买乐视电视享钜惠</p>
                                    <p>送60个月会员</p>
                                    <div class="microwave">
                                        <img src="upload/风扇.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="logoarea">
                        <img src="upload/logo区域.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 大楼层样式结束 -->
        <!-- 设置热门疯抢样式 ，这个模块使用section标签-->
        <div class="w hot_purchase">
            <!-- 设置顶部文字样式 -->
            <section class="hot_hd">
                <h3 class="col-red">热门疯抢</h3>
            </section>
            <!-- 设置主体内容样式 -->
            <section class="hot_bd">
                <section class="hot_bd_left">
                    <div class="glass">
                        <a href="#"><img src="upload/VR.png" alt=""></a>    
                    </div>
                    <p><a href="#">虚拟现实智能VR眼镜</a></p>
                    <p class="col-red">&yen;79.00</p>
                </section>
                <section class="hot_bd_cen">
                    <ul>
                        <li>
                            <div class="img">
                                <img src="upload/充电宝.png" alt="">
                            </div>
                            <div class="text">
                                <p><a href="#">羽博7800毫安z3移动电源/充电</a></p>
                                <p class="col-red">&yen;139.00</p>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <img src="upload/声道.png" alt="">
                            </div>
                            <div class="text">
                                <p><a href="#">羽博7800毫安z3移动电源/充电</a></p>
                                <p class="col-red">&yen;139.00</p>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <img src="upload/衣服.png" alt="">
                            </div>
                            <div class="text">
                                <p><a href="#">羽博7800毫安z3移动电源/充电</a></p>
                                <p class="col-red">&yen;139.00</p>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <img src="upload/衣服.png" alt="">
                            </div>
                            <div class="text">
                                <p><a href="#">羽博7800毫安z3移动电源/充电</a></p>
                                <p class="col-red">&yen;139.00</p>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <img src="upload/衣服.png" alt="">
                            </div>
                            <div class="text">
                                <p><a href="#">羽博7800毫安z3移动电源/充电</a></p>
                                <p class="col-red">&yen;139.00</p>
                            </div>
                        </li>
                        <li>
                            <div class="img">
                                <img src="upload/复古.png" alt="">
                            </div>
                            <div class="text">
                                <p><a href="#">羽博7800毫安z3移动电源/充电</a></p>
                                <p class="col-red">&yen;139.00</p>
                            </div>
                        </li>
                    </ul>
                </section>
                <section class="hot_bd_right">
                    <div class="imgtop">
                        <img src="upload/分辨率.png" alt="">
                    </div>
                    <div class="imgbottom">
                        <img src="upload/摄像头.png" alt="">
                    </div>
                </section>
            </section>
        </div>
        <!-- 热门疯抢样式结束 -->
         <!-- 设置侧边栏样式 -->
        <aside class="nav_aside">
             <ul>
                 <li><a href="#furniture">家用电器</a></li>
                 <li><a href="#phone">收集通讯</a></li>
                 <li><a href="#computer">电脑办公</a></li>
                 <li><a href="#">家居家具</a></li>
                 <li><a href="#">生活用品</a></li>
                 <li><a href="#">运动户外</a></li>
                 <li><a href="#">汽车用品</a></li>
                 <li><a href="#">食品酒类</a></li>
                 <li><a href="#">医药保健</a></li>
                 <li><a href="#">图书音像</a></li>
                 <li><a href="#">金融彩票</a></li> 
                 <li><a href="#">去顶部</a></li>
             </ul>
        </aside> 
         <!-- 侧边栏样式结束 -->
         <!-- 设置尾部 -->
        <div id="footer" class="footer">
            <div class="footer_auto w clearfix">
                <!-- 设置尾部顶部样式 -->
                <div class="footer_top">
                    <!-- 设置尾部顶部模块的每一个区域 -->
                <div class="footer_top_mod">
                    <h5>正品保障</h5>
                    <div class="footer_top_mod_text">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </div>
                <div class="footer_top_mod">
                    <h5>正品保障</h5>
                    <div class="footer_top_mod_text">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </div>
                <div class="footer_top_mod">
                    <h5>正品保障</h5>
                    <div class="footer_top_mod_text">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </div>
                <div class="footer_top_mod">
                    <h5>正品保障</h5>
                    <div class="footer_top_mod_text">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </div>
                <div class="footer_top_mod">
                    <h5>正品保障</h5>
                    <div class="footer_top_mod_text">
                        <h4>正品保障</h4>
                        <p>正品保障，提供发票</p>
                    </div>
                </div>
                </div>
                <!-- 设置尾部中部盒子 -->
                <div class="footer_middle">
                <div class="footer_middle_shopping"> 
                    <h5>购物指南</h5>
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">会员介绍</a></li>
                        <li><a href="#">生活旅行/团购</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">大家电</a></li>
                        <li><a href="#">联系客服</a></li>
                    </ul>
                </div>
                <div class="footer_middle_shopping"> 
                    <h5>配送方式</h5>
                    <ul>
                        <li><a href="#">上门自提</a></li>
                        <li><a href="#">211限时达</a></li>
                        <li><a href="#">配送服务查询</a></li>
                        <li><a href="#">配送费收取标准</a></li>
                        <li><a href="#">海外配送</a></li>
                    </ul>
                </div>
                <div class="footer_middle_shopping"> 
                    <h5>支付方式</h5>
                    <ul>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">在线支付</a></li>
                        <li><a href="#">分期付款</a></li>
                        <li><a href="#">邮局汇款</a></li>
                        <li><a href="#">公司转账</a></li>
                    </ul>
                </div>
                <div class="footer_middle_shopping"> 
                    <h5>售后服务</h5>
                    <ul>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">价格保护</a></li>
                        <li><a href="#">退款说明</a></li>
                        <li><a href="#">返修/退换货</a></li>
                        <li><a href="#">取消订单</a></li>
                    </ul>
                </div>
                <div class="footer_middle_shopping"> 
                    <h5>特色服务</h5>
                    <ul>
                        <li><a href="#">夺宝岛</a></li>
                        <li><a href="#">DIY装机</a></li>
                        <li><a href="#">延保服务</a></li>
                        <li><a href="#">品优购E卡</a></li>
                        <li><a href="#">品优购通信</a></li>
                    </ul>
                </div>
                <div class="footer_middle_shopping"> 
                    <h5>帮助中心</h5>
                    <h6>二维码</h6>
                    <p>品优购客户端</p>
                </div>
                </div>
                <!-- 设置尾部底部盒子 -->
                <div class="footer_bottom">
                <p>
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">联系客服</a>
                    <a href="#">商家入驻</a>
                    <a href="#">营销中心</a>
                    <a href="#">手机品优购</a>
                    <a href="#">友情链接</a>
                    <a href="#">销售联盟</a>
                    <a href="#">品优购社区</a>
                    <a href="#">品优购公益</a>
                    <a href="#">English Site</a>
                    <a href="#">Contact U</a>
                </p>
                <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
                <p>京ICP备08001421号京公网安备110108007702</p>
                </div>
            </div>
        </div>
         <!-- 尾部结束-->

    </div>
</body>
</html>